<template>
    <view class="content">
        <view class="swipers">
            <swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" indicator-active-color="#fff"
                :indicator-color="indicatorColor" :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(item,index) in swiperarr" :key="index">
                    <view class="swiper-item">
                        <image :src="item.url"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="strategy">
            <view class="sepstr">
                <image src="../../static/img/rings.png"></image>
                <text>交易策略升级说明</text>
            </view>
            <navigator url="../notice/notice" hover-class="none">
                <image class="rightimg" src="../../static/img/sele.png"></image>
            </navigator>
        </view>
        <view class="outbg">
            <view class="modulb">
                <view class="tavfal">
                    <view class="tabdata" v-for="(item,index) in tabs" :key="index" :id="item.vals" :data-index="index"
                        :class="active==index?'addcla':''" @click="tabFn">
                        <image :src="item.imgs"></image>
                        {{item.names}}
                    </view>
                </view>
                <view class="bitypes">
					<me-select
					class="typlist"
					ref="meSelect" 
					@change="change" 
					@finish="finish" 
					@itemClick="itemClick" 
					:datalist="indexArray"
					:options="options"
					>
					<view slot-scope="slot" class="navcnedml" @click="navtoDeails(slot.slotScope.item)" :data-exchangeType="slot.slotScope.item.exchangeType" :data-dest="slot.slotScope.item.destinationCoin" :data-sourc="slot.slotScope.item.sourceCoin" :data-amount="slot.slotScope.item.amount" :data-urls="slot.slotScope.item.url" :data-direction="slot.slotScope.item.direction" :data-leverRate="slot.slotScope.item.leverRate"
					    hover-class="none">
					    <view class="atomusdt">
					        <view class="secondmodl">
					            <image :src="slot.slotScope.item.url"></image>
					            <text class="texa">{{slot.slotScope.item.destinationCoin}}/</text>
					            <text class="texb">{{slot.slotScope.item.sourceCoin}}</text>
					        </view>
							<view class="chcl">
								<text style="padding-top: 4px;">持仓:</text>
							    <text style="padding-top: 4px;">{{slot.slotScope.item.amount}}</text>
							</view>
							<!-- <view class="chcl">
								<text style="padding-top: 4px;">对冲仓:</text>
							    <text style="padding-top: 4px;">{{slot.slotScope.item.offSetAmount}}</text>
							</view> -->
					    </view>
						<view class="fords">
							<view class="thirths">
							    <view class="buy" v-if="slot.slotScope.item.direction=='buy'">
							        {{slot.slotScope.item.leverRate}}X·多
							    </view>
							    <view class="sell" v-if="slot.slotScope.item.direction=='sell'">
							        {{slot.slotScope.item.leverRate}}X·空
							    </view>
							</view>
						</view>
					    <view class="fords">
					        <view class="thirths">
					            <view class="thirleft" v-if="slot.slotScope.item.strategyType==0">
					                循环
					            </view>
					            <view class="thirleft" v-if="slot.slotScope.item.strategyType==1">
					                单次
					            </view>
								<!-- <view style="height: 100%;">
									<view class="thirright">
										加:
										<text>{{slot.slotScope.item.antiCoverTime}}</text>
									</view>
									<view class="thirright" style="margin-top: 10px;">
										补:
										<text>{{slot.slotScope.item.coverTime}}</text>
									</view>
								</view> -->
					        </view>
					        <view class="colnumLoss" v-if="slot.slotScope.item.floatProfit<0">
					            <text>浮盈{{slot.slotScope.item.floatProfit}}</text>
							</view>
							<view class="colnum" v-if="slot.slotScope.item.floatProfit==0">
							    <text>浮盈{{slot.slotScope.item.floatProfit}}</text>
							</view>
							<view class="colnumWin" v-if="slot.slotScope.item.floatProfit>0">
								<text>浮盈{{slot.slotScope.item.floatProfit}}</text>
							</view>
					    </view>
						<view class="fords">
							<view class="fourth" v-if="slot.slotScope.item.rate<0" style="background-color: #D63E5D;">
								{{slot.slotScope.item.rate}}%
							</view>
							<view class="fourth" v-if="slot.slotScope.item.rate==0" style="background-color: #ADB0BB;">
							    {{slot.slotScope.item.rate}}%
							</view>
							<view class="fourth" v-if="slot.slotScope.item.rate>0" style="background-color: #05BC97;">
							    {{slot.slotScope.item.rate}}%
							</view>
						</view>
						<image class="lock" src="/static/img/lock.png" v-show="slot.slotScope.item.lock"></image>
					</view>
					</me-select>
                </view>
            </view>
        </view>
		<sa-hover-menu v-on:pChangeType="getSelectAll" :exchangeType=imgstypels></sa-hover-menu>
		<gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
        <backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    import {multiply} from "../../untils/math.js";
	import saHoverMenu from '../../components/sa-hover-menu/sa-hover-menu.vue';
    import meSelect from '../../components/me-select/me-select.vue';
	import gmyFloatTouch from "../../components/gmy-float-touch/gmy-float-touch.vue"  
	import backTop from '../../components/back-top/back-top.vue';
	export default {
		components: {
		    saHoverMenu,
			meSelect,
			backTop
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
        data() {
            return {
				scrollTop: 0,
				backTop: {
					src: '../../static/top.png',
					scrollTop: 0
				},
				mainImg:"../../static/mainImg.png",                                                                                             //数据格式
				imgLists:["../../static/choose.png","../../static/allSelect.png","../../static/allCancel.png"],
				options: {
					flags: ['id'], //设置需要返回的参数这个参数必须在 dataList 中的item中存在（不配置默认全部返回）
					itemCanSelect: true //是否开启点击列表页选择配置
				},
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 1000,
                circular: true,
                indicatorColor: 'rgba(0, 0, 0, .3)',
                swiperarr: [],
                tabs: [{
                    vals: '0',
                    names: '欧易',
                    imgs: '../../static/img/ind0.png'
                },{
                    vals: '1',
                    names: '火币',
                    imgs: '../../static/img/ind2.png'
                },{
                    vals: '2',
                    names: '币安',
                    imgs: '../../static/img/ind1.png'
                }],
                active: 0,
                btcVal: '',
                btcPercent: '',
                ethVal: '',
                ethPercent: '',
                eosVal: '',
                eosPercent: '',
                indexArray: [],
                imgstypels: '0',
                timer:null,
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');

            request.postAssets('/assets/userWalletInfo/queryUserWalletInfo', {
                sortAttribute: '3',
                sortType: 'descend',
                userId: uinfo.userId
            }).then(res => {
                if (res.code == '200') {
                    if (res.data.items != '') {
                        if (res.data.items[0].pointBalance < 10) {
                            uni.showModal({
                                content: '您的点卡已不足,请及时联系管理员充点卡,不然机器人将无法启动！',
                                confirmText: '确认',
                                confirmColor: "#7F6AC3",
								showCancel: false,
                                success: function(res) {
                                    if (res.confirm) {
                                        uni.navigateTo({
                                            url: '/pages/customser/customser',
                                        });
                                    }
                                }
                            });
                        }
                    }
                }
            })
            this.bansNtics();
            uni.startPullDownRefresh();
        },
        onPullDownRefresh() {
            this.binListFn(this.imgstypels);
        },
        onShow() {
            let _this=this;
			//uni.startPullDownRefresh();
            //进入页面，开启定时器
            //_this.timer=setInterval(function(){_this.binListFn(_this.imgstypels)}, 1000 * 5)
        },
        onUnload(){
            let _this=this;
            console.log('卸载')
            //卸载页面，清除定时器
            // if(_this.timer) {  
            //         clearInterval(_this.timer);  
            //         _this.timer = null;  
            // }
        },
        onHide(){
         let _this=this;
         console.log('离开')
         //卸载页面，清除定时器
         // if(_this.timer) {  
         //         clearInterval(_this.timer);  
         //         _this.timer = null;  
         //     }
        },
        beforeDestroy() {
            let _this=this;
            //clearInterval(_this.timer);
        },
        methods: {
			floatTouchClick:function(e){                                                                                                 //事件
			    if(e == '0'){
					this.multiChoose();
				}else if(e == '1'){
					this.$refs.meSelect.selectAll();
				}else if(e == '2'){
					this.$refs.meSelect.unSelectAll();
				}
			},
			multiChoose(){
				this.$refs.meSelect.changeModel()
			},
			getSelectAll:function(params,callback) {
				let requestDataList = this.$refs.meSelect.getSelectAll()
				console.log('当前全选:', requestDataList)
				callback(requestDataList);
			},
			itemClick(e) {
				console.log('列表点击了：', e)
			},
			finish(e) {
				console.log('所有的选择：', e)
			},
			change(e) {
				console.log('发生改变了：', e)
			},
            //跳转详情
            navtoDeails(item){
                uni.navigateTo({
					url: '/pages/transdetail/transdetail?exchangeType='+item.exchangeType+'&dest='+item.destinationCoin+'&sourc='+item.sourceCoin+'&amount='+item.amount+'&urls='+item.url+'&direction='+item.direction+'&leverRate='+item.leverRate,
                });
            },
            //banner
            bansNtics() {
                request.postMember('/user/commoninfo/queryCommonInfo', {
                    type: '1'
                }).then(res => {
                    if (res.code == '200') {
                        this.swiperarr = res.data.infos;
                    }
                })
            },
            //tab切换
            tabFn(e) {
                //下标
                let inde = e.currentTarget.dataset.index;
                this.active = inde;
                //当前val
                this.imgstypels = e.currentTarget.id || e.target.id;
				uni.startPullDownRefresh();
            },
            //欧易,火币，币安 列表
            binListFn(types) {
                let _this=this;
                request.postAssets('/assets/quantOperate/getSysOpeningQuantBotList', {
					userId: uinfo.userId, //用户账户ID
                    exchangeType: types //交易所类型(0.okex 1.huobi 2.binance)
                }).then(res => {
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        this.indexArray = res.data;
						
						function substr(str,num){
						    var s = str + "";
						    if(s.indexOf(".")!='-1'){
						        var str = s.substring(0,s.indexOf(".") + num);
						    }
						    return str
						}
						
                        res.data.map(item=>{
							item.rate = substr(item.rate,5)
							item.floatProfit = substr(item.floatProfit,5)
                        })
                    } else {
                        //clearInterval(_this.timer);
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                        uni.stopPullDownRefresh();
                    }
                })
            }
        }
    }
</script>

<style>
    .swiper {
        height: 280rpx;
    }

    .swiper .swiper-item {
        width: 710rpx;
        height: 280rpx;
        margin: 0 auto;
    }

    .swiper .swiper-item image {
        width: 710rpx;
        height: 280rpx;
        border-radius: 10px;
    }

    .strategy {
        margin: 17px 40rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 17px 0;
    }

    .strategy .sepstr text {
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }

    .strategy .sepstr image {
        width: 34rpx;
        height: 34rpx;
        vertical-align: -3px;
        margin: 0 10px 0 0;
    }

    .strategy .rightimg {
        width: 16px;
        height: 12px;
    }

    .outbg {
        background: #f5f5f5;
        padding: 10px 0;
    }

    .modula {
        width: 710rpx;
        height: 180rpx;
        background: #FFFFFF;
        border-radius: 4px;
        margin: 0 auto 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .listthree {
        width: 240rpx;
    }

    .listthree .textce {
        text-align: center;
    }

    .listthree image {
        width: 36rpx;
        height: 36rpx;
        vertical-align: -3px;
        margin: 0 4px 0 0;
    }

    .listthree .texta {
        font-size: 14px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 20px;
        color: #333333;
    }

    .listthree .textb {
        font-size: 12px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 16px;
        color: #ADB0BB;
    }

    .listthree .dolls {
        font-size: 18px;
        font-family: Aileron;
        font-weight: 600;
        line-height: 26px;
        text-align: center;
        color: #019D20;
    }

    .listthree .percentage {
        font-size: 14px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 20px;
        color: #019D20;
        text-align: center;
    }

    .modulb {
        width: 710rpx;
        margin: 0 auto;
        padding: 10px 0 0 0;
        border-radius: 10px;
        background: #FFFFFF;
    }


    .tavfal {
        display: flex;
        justify-content: space-around;
        height: 80rpx;
        align-items: center;
    }

    .tabdata {
        font-size: 24rpx;
        font-family: PingFang SC;
        color: #0F0F0F;
        font-weight: bold;
        padding: 3px 18px 0 28rpx;
        height: 80rpx;
    }

    .tabdata image {
        width: 64rpx;
        height: 68rpx;
        vertical-align: -10px;
    }

    .addcla {
        border-bottom: 1px solid #7F6AC3;
    }

    .bitypes {
        padding: 20rpx 0 10px 0;
    }

    .typlist .navcnedml {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #EBEBEB;
        padding: 10px 0 10px 0;
        margin: 0 10px;
    }

    .typlist .atomusdt {
        width: 170rpx;
    }

    .typlist .serialnumber {
        font-size: 16px;
        font-family: Aileron;
        font-weight: 600;
        line-height: 22px;
        color: #6E6E6E;
    }

    .typlist .secondmodl {
        display: flex;
        padding: 0 0 10px 0;
        align-items: center;
    }

    .typlist .secondmodl image {
        width: 17px;
        height: 17px;
    }

    .typlist .secondmodl .texa {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
    }

    .typlist .secondmodl .texb {
        font-size: 12px;
        font-family: Source Han Sans CN;
        color: #ADB0BB;
    }

    .typlist .chcl {
		display: flex;
		flex-direction: row;
		align-items: center;
    }

    .typlist .chcl text {
        font-size: 12px;
        font-family: Source Han Sans CN;
        color: #838AA4;
    }

    .typlist .fords .thirths {
        display: flex;
        padding: 0 0 9px 0;
    }
	
	.typlist .fords .fourth {
		display: flex;
		flex-direction: row;
		width: 78px;
		height: 28px;
        border-radius: 4px;
        font-size: 15px;
		font-family: Aileron;
		font-weight: 500;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
	}

    .typlist .thirths .buy {
        font-size: 15px;
        font-weight: bold;
        color: #008800;
        background: #ffffff;
        border-radius: 2px;
    }
	
	.typlist .thirths .sell {
	    font-size: 15px;
	    font-weight: bold;
	    color: #D63E5D;
	    background: #ffffff;
	    border-radius: 2px;
	}

    .typlist .thirths .thirleft {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: #7F6AC3;
        width: 58px;
        height: 20px;
        background: #D2E7FF;
        border-radius: 2px;
        text-align: center;
        margin: 0 3px 0 0;
    }

    .typlist .thirths .thirright {
		display: flex;
        width: 52rpx;
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 9px;
        color: #838AA4;
		align-items: center;
		justify-content: center;
    }

    .typlist .thirths .thirright text {
        font-size: 12px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 9px;
        color: #333333;
        margin: 0 3px 0 0;
    }

    .typlist .colnum {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #838AA4;
		align-items: center;
		justify-content: center;
    }

    .typlist .colnum text {
        font-size: 14px;
        font-family: Aileron;
        font-weight: 400;
        color: #838AA4;
    }
	
	.typlist .colnumWin {
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #05BC97;
		align-items: center;
		justify-content: center;
	}
	
	.typlist .colnumWin text {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    color: #05BC97;
	}
	
	.typlist .colnumLoss {
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #D63E5D;
		align-items: center;
		justify-content: center;
	}
	
	.typlist .colnumLoss text {
	    font-size: 14px;
	    font-family: Aileron;
	    font-weight: 400;
	    color: #D63E5D;
	}
	
	.lock {
	    width: 30px;
	    height: 30px;
	}
	
	.positionAmount{
		padding-bottom: 1px;
	}
</style>
